<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>栅格背景图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 512px;
            height: 256px;
        }
        ul,li{
            
            list-style: none;
        }
        li{
            width: 50px;
            height: 50px;
            position: absolute;
            border: 2px solid rgba(250, 250, 250, .3);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul></ul>
    <script>
    
        // 获取父级容器
        var oUl = document.getElementsByTagName("ul")[0];

        // 创建li元素
            // 第一个循环：行数
            for(var i=0; i<10; i++){
                // 第二个循环：列数
                for(var j=0;j<5; j++){
                    // 更改ul中的内容（并创建li元素）
                    oUl.innerHTML += "<li style='left:"+i*51+"px;top:"+j*51+"px;background:url(./img/1.png) -"+i*50+"px -"+j*50+"px';></li>";
                }
            }
    
    </script>
</body>
</html>